@import '@dataspherestudio/shared/common/style/variables.scss';

// $permissions-Backgroud: #F4F7FB;
$per-border-color: $border-color-base;
.permission-wrap{
  display: flex;
  flex-direction: column;
  // background: $workspace-background;
  @include bg-color($workspace-background, $dark-workspace-background);
  min-height: 100%;
  .page-bgc-header {
    padding: 0px $padding-25 0;
    // background: $body-background;
    @include bg-color($workspace-body-bg-color, $dark-workspace-body-bg-color);
    border-bottom: $border-width-base  $border-style-base $border-color-base;
    @include border-color($border-color-base, $dark-workspace-body-bg-color);
    .header-info {
      padding: 25px 0px 25px 0px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 21px;
      // color: $text-title-color;
      @include font-color($workspace-title-color, $dark-workspace-title-color);

    }
  }
  .header, .footer{
    // background-color: $permissions-Backgroud;
    @include bg-color($workspace-background, $dark-workspace-background);
    width: 100%;
    height: 24px;

    box-sizing: border-box;
  }
  .footer{
    // border-top: 1px solid $per-border-color;
    // @include border-color($border-color-base, $dark-workspace-body-bg-color);
  }
  .main{
    flex:1;
    // background-color: #fff;
    @include bg-color($workspace-background, $dark-workspace-background);
    display: flex;
    align-items: stretch;
    margin-top: 24px;

    .slider{
      padding-top:20px;
      width: 250px;
      // background-color: $permissions-Backgroud;
      @include bg-color($workspace-body-bg-color, $dark-workspace-body-bg-color);
      box-sizing: border-box;
      border-right: 1px solid $per-border-color;
      border-top: 1px solid $per-border-color;
      border-bottom: 1px solid $per-border-color;
      @include border-color($border-color-base, $dark-workspace-body-bg-color);
      .menuItem{
        height: 40px;
        width: 100%;
        padding-left: 24px;
        line-height: 40px;
        font-size: 14px;

        // color: rgba(0,0,0,0.65);
        @include font-color($light-text-color, $dark-workspace-title-color);
        cursor: pointer;
        &:hover{
          // color: #2E92F7;
          @include font-color($primary-color, $dark-primary-color);
        }
      }
      .menuChoosed{
        // color: #2E92F7;
        @include font-color($primary-color, $dark-primary-color);
        border-right: 2px solid #2E92F7;
        @include border-color($primary-color, $dark-primary-color);
        // background: #ECF4FF;
        @include bg-color($active-menu-item, $dark-active-menu-item);


      }
    }
    .content{
      flex:1;
      margin: 0 20px;
    }
  }
}


